﻿﻿﻿<template>
    <div class="donation">
        <div class="u0">
            <div class="u2">
                <form action="">
                    <div class="u30"><p>捐赠物品</p></div>
                    <select class="select1" autofocus v-model="selected">
                        <option disabled value="">请选择类别</option>
                        <option>衣物</option>
                        <option>书籍</option>
                        <option>学习用具</option>
                        <option>生活用品</option>
                        <option>其他</option>
                    </select>

                    <input id="goodsName" class="goodsName" name="goodsName" type="text" v-model="goodsName" placeholder=" 请输入物品的具体名称" />
                    <p id="p1">*请输入物品的具体名称</p>
                    <textarea id="words" class="words" name="words" placeholder="留言" v-model="messages"></textarea>
                    <p id="p2">*请输入您的留言</p>
                    <router-link to="/donationOK"><input type="submit" class="sure" name="sure" id="sure" value="确定" @click="submit"></router-link>
                </form>
            </div>
        </div>
        <div class="u43"></div>
    </div>
</template>
<script scoped>
    export default{
        data(){
            return {
                goodsName:'',
                messages:'',
                selected:''

            }
        },
        mounted(){
            //提交按钮的颜色变化
            var buttonOK=document.getElementById('sure');
            buttonOK.onmouseover=function(){
                buttonOK.style.background='rgba(255,0,0,0.8)';
            };
            buttonOK.onmouseout=function(){
                buttonOK.style.background='rgba(255,0,0,0.6)';
                //alert('hi');
            }
            //捐赠物品名称验证
            var goodsName=document.getElementById('goodsName');
            var p1=document.getElementById('p1');
            goodsName.onblur=function(){
                if(goodsName.value.length==0 || goodsName.value==null){
                    p1.style.display='block';
                }
            };
            goodsName.onfocus=function(){

                if(goodsName.value.length!=0 || goodsName.value!=null){
                    p1.style.display='none';
                }
            };
            //留言验证
            var words=document.getElementById('words');
            var p2=document.getElementById('p2');
            words.onblur=function(){
                if(words.value.length==0 || words==null){
                    p2.style.display='block';
                }
            };
            words.onfocus=function(){
                if(words.value.length!=0 || words.value!=null){
                    p2.style.display='none';
                }
            };

        },
        methods:{
            submit(){
                this.goodsName
                this.messages
                this.selected
                var _this = this;
                var params = new URLSearchParams();
                params.append('goodsName', this.goodsName);
                params.append('messages', this.messages);
                params.append('selected', this.selected);
                this.http.post('/users/message', params).then(function (res) {
//                    console.log(res);
                }).catch(function (err) {

                })
            }
        }
    }
</script>
<style scoped>
    .u0{
        height: 550px;
        background: url(../assets/images/开始捐赠/donation_u0.jpg) no-repeat top center;
        margin: 0 auto;
        position: relative;
    }

    .u2{
        height: 347px;
        width: 303px;
        background: url(../assets/images/开始捐赠/donation_u2.png) no-repeat center;
        margin:0 auto;
        top: 80px;
        position: relative;
    }

    .u30{
        height: 29px;
        width: 128px;
        background: white no-repeat center;
        margin:0 auto;
        top: 20px;
        left: 85px;
        position: absolute;
    }

    .u30 p{
        left: 5px;
        top: 3px;
        color: rgba(0,0,0,0.7);
        font-size: 30px;
        font-family: 微软雅黑;
        position: absolute;
    }

    .select1{
        height: 38px;
        width: 225px;
        margin: 0 auto;
        top: 65px;
        left: 39px;
        position: absolute;
    }

    .goodsName{
        height: 38px;
        width: 225px;
        background: url(../assets/images/开始捐赠/donation_u32.png);
        margin: 0 auto;
        top: 125px;
        left: 39px;
        position: absolute;
    }

    #p1{
        height: 20px;
        width: 160px;
        color: red;
        font-size: 10px;
        padding-top: 165px;
        margin-left: 40px;
        positive: absolute;
        display: none;
    }

    .words{
        height: 70px;
        width: 225px;
        margin: 0 auto;
        top: 195px;
        left: 38px;
        position: absolute;
    }

    #p2{
        height: 20px;
        width: 160px;
        color: red;
        font-size: 10px;
        margin-top: 87px;
        margin-left: 38px;
        positive: absolute;
        display: none;
    }

    .sure{
        height: 33px;
        width: 247px;
        background: rgba(255,0,0,0.6);
        color: white;
        font-size: 20px;
        font-family: 微软雅黑;
        margin: 0 auto;
        top: 300px;
        left: 28px;
        position: absolute;
    }

    .u43{
        height: 381px;
        background: url(../assets/images/开始捐赠/donation_u43.jpg) no-repeat top center;
        top: -5px;
        position: relative;
    }
</style>